<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 筛选搜索容器 -->
    <div class="search-container">
      <el-form :model="searchForm" ref="searchFormRef" label-width="100px" class="demo-ruleForm">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="商品编号">
              <el-input v-model="searchForm.productCode" placeholder="请输入商品编号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品名称">
              <el-input v-model="searchForm.productName" placeholder="请输入商品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品类别">
              <el-cascader
                v-model="searchForm.category"
                :options="categoryOptions"
                :props="{ checkStrictly: true, expandTrigger: 'hover' }"
                clearable
                placeholder="请选择商品类别"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="品牌">
              <el-input v-model="searchForm.brand" placeholder="请输入品牌" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品标签">
              <el-select v-model="searchForm.productTag" placeholder="请选择商品标签">
                <el-option label="热销" value="热销" />
                <el-option label="促销" value="促销" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库存状态">
              <el-select v-model="searchForm.stockStatus" placeholder="请选择库存状态">
                <el-option label="已上架" value="已上架" />
                <el-option label="未上架" value="未上架" />
                <el-option label="已下架" value="已下架" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="销售状态">
              <el-select v-model="searchForm.saleStatus" placeholder="请选择销售状态">
                <el-option label="在售" value="在售" />
                <el-option label="预售" value="预售" />
                <el-option label="已售" value="已售" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="价格区间">
              <el-input-number v-model="searchForm.priceRange" :min="0" :max="1000000" :step="100" controls-position="right" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="上架时间">
              <el-date-picker v-model="searchForm.launchDate" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="下架时间">
              <el-date-picker v-model="searchForm.offShelfDate" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商">
              <el-input v-model="searchForm.supplier" placeholder="请输入供应商" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="制造商">
              <el-input v-model="searchForm.manufacturer" placeholder="请输入制造商" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: center;">
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
            <el-button type="success" @click="showAddDialog">新增商品</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 数据列表容器 -->
<div class="table-container" style="overflow-x: auto;">
  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="productCode" label="商品编号" width="120" />
    <el-table-column label="商品图片" width="120">
      <template #default="{ row }">
        <img :src="row.productImage" alt="Product Image" style="max-width: 100px; max-height: 100px;" />
      </template>
    </el-table-column>
    <el-table-column prop="productName" label="商品名称" width="150" />
    <el-table-column prop="category" label="商品类别" width="150" />
    <el-table-column prop="brand" label="品牌" width="150" />
    <el-table-column prop="stockStatus" label="库存状态" width="150" />
    <el-table-column prop="priceRange" label="价格区间" width="150" />
    <el-table-column prop="saleStatus" label="销售状态" width="150" />
    <el-table-column prop="launchDate" label="上架时间" width="150" />
    <el-table-column prop="offShelfDate" label="下架时间" width="150" />
    <el-table-column prop="supplier" label="供应商" width="150" />
    <el-table-column prop="manufacturer" label="制造商" width="150" />
    <el-table-column prop="productTag" label="商品标签" width="150" />
    <el-table-column prop="origin" label="产地" width="150" />
    <el-table-column prop="expirationDate" label="保质期" width="150" />
    <el-table-column prop="batchNumber" label="批号" width="150" />
    <el-table-column prop="remarks" label="备注" width="150" />
    <!-- 操作列 -->
    <el-table-column label="操作" fixed="right" width="180">
      <template #default="{ row }">
        <el-button link type="primary" size="small" @click="handleView(row)">查看</el-button>
        <el-button link type="success" size="small" @click="handleEdit(row)">编辑</el-button>
        <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
        <el-button
          link
          :type="row.status === '上架' ? 'warning' : 'success'"
          size="small"
          @click="handleToggleStatus(row)"
        >
          {{ row.status === '上架' ? '下架' : '上架' }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

<!-- 新增商品弹出框 -->
<el-dialog
      title="新增商品"
      v-model="isAddDialogVisible"
      width="60%"
      @close="resetAddForm"
    >
      <el-form :model="addForm" ref="addFormRef" label-width="120px" :rules="addFormRules" class="add-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品编号" prop="productCode">
              <el-input v-model="addForm.productCode" placeholder="请输入商品编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品名称" prop="productName">
              <el-input v-model="addForm.productName" placeholder="请输入商品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品类别" prop="category">
              <el-cascader
                v-model="addForm.category"
                :options="categoryOptions"
                :props="{ checkStrictly: true, expandTrigger: 'hover' }"
                clearable
                placeholder="请选择商品类别"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="addForm.brand" placeholder="请输入品牌" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库存状态" prop="stockStatus">
              <el-select v-model="addForm.stockStatus" placeholder="请选择库存状态">
                <el-option label="已上架" value="已上架" />
                <el-option label="未上架" value="未上架" />
                <el-option label="已下架" value="已下架" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="价格区间" prop="priceRange">
              <el-input-number v-model="addForm.priceRange" :min="0" :max="1000000" :step="100" controls-position="right" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售状态" prop="saleStatus">
              <el-select v-model="addForm.saleStatus" placeholder="请选择销售状态">
                <el-option label="在售" value="在售" />
                <el-option label="预售" value="预售" />
                <el-option label="已售" value="已售" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上架时间" prop="launchDate">
              <el-date-picker v-model="addForm.launchDate" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下架时间" prop="offShelfDate">
              <el-date-picker v-model="addForm.offShelfDate" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商" prop="supplier">
              <el-input v-model="addForm.supplier" placeholder="请输入供应商" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制造商" prop="manufacturer">
              <el-input v-model="addForm.manufacturer" placeholder="请输入制造商" />
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: right; margin-top: 20px;">
          <el-button @click="closeAddDialog">取消</el-button>
          <el-button type="primary" @click="handleAdd">确定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog
      title="编辑商品"
      v-model="isEditDialogVisible"
      width="60%"
      @close="resetEditForm"
    >
      <el-form :model="editForm" ref="editFormRef" label-width="120px" :rules="editFormRules" class="edit-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品编号" prop="productCode">
              <el-input v-model="editForm.productCode" placeholder="请输入商品编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品名称" prop="productName">
              <el-input v-model="editForm.productName" placeholder="请输入商品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品类别" prop="category">
              <el-cascader
                v-model="editForm.category"
                :options="categoryOptions"
                :props="{ checkStrictly: true, expandTrigger: 'hover' }"
                clearable
                placeholder="请选择商品类别"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="editForm.brand" placeholder="请输入品牌" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库存状态" prop="stockStatus">
              <el-select v-model="editForm.stockStatus" placeholder="请选择库存状态">
                <el-option label="已上架" value="已上架" />
                <el-option label="未上架" value="未上架" />
                <el-option label="已下架" value="已下架" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="价格区间" prop="priceRange">
              <el-input-number v-model="editForm.priceRange" :min="0" :max="1000000" :step="100" controls-position="right" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售状态" prop="saleStatus">
              <el-select v-model="editForm.saleStatus" placeholder="请选择销售状态">
                <el-option label="在售" value="在售" />
                <el-option label="预售" value="预售" />
                <el-option label="已售" value="已售" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上架时间" prop="launchDate">
              <el-date-picker v-model="editForm.launchDate" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下架时间" prop="offShelfDate">
              <el-date-picker v-model="editForm.offShelfDate" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商" prop="supplier">
              <el-input v-model="editForm.supplier" placeholder="请输入供应商" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制造商" prop="manufacturer">
              <el-input v-model="editForm.manufacturer" placeholder="请输入制造商" />
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: right; margin-top: 20px;">
          <el-button @click="closeEditDialog">取消</el-button>
          <el-button type="primary" @click="handleEditSubmit">确定</el-button>
        </div>
      </el-form>
    </el-dialog>

         <!-- 查看商品弹出框 -->
  <el-dialog
    title="查看商品"
    v-model="isViewDialogVisible"
    width="60%"
    @close="closeViewDialog"
  >
    <el-form :model="viewForm" ref="viewFormRef" label-width="120px" class="view-form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商品编号">
            <el-input v-model="viewForm.productCode" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品名称">
            <el-input v-model="viewForm.productName" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品类别">
            <el-cascader
              v-model="viewForm.category"
              :options="categoryOptions"
              :props="{ checkStrictly: true, expandTrigger: 'hover' }"
              clearable
              readonly
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="品牌">
            <el-input v-model="viewForm.brand" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库存状态">
            <el-select v-model="viewForm.stockStatus" readonly>
              <el-option label="已上架" value="已上架" />
              <el-option label="未上架" value="未上架" />
              <el-option label="已下架" value="已下架" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="价格区间">
            <el-input v-model="viewForm.priceRange" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售状态">
            <el-select v-model="viewForm.saleStatus" readonly>
              <el-option label="在售" value="在售" />
              <el-option label="预售" value="预售" />
              <el-option label="已售" value="已售" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上架时间">
            <el-date-picker v-model="viewForm.launchDate" type="date" format="yyyy-MM-dd" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下架时间">
            <el-date-picker v-model="viewForm.offShelfDate" type="date" format="yyyy-MM-dd" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商">
            <el-input v-model="viewForm.supplier" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="制造商">
            <el-input v-model="viewForm.manufacturer" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品标签">
            <el-input v-model="viewForm.productTag" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产地">
            <el-input v-model="viewForm.origin" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有效期">
            <el-date-picker v-model="viewForm.expirationDate" type="date" format="yyyy-MM-dd" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="批号">
            <el-input v-model="viewForm.batchNumber" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input type="textarea" v-model="viewForm.remarks" readonly />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeViewDialog">关闭</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElForm, ElInput, ElButton, ElSelect, ElOption, ElDatePicker, ElCascader, ElDialog, ElTable, ElTableColumn, ElBreadcrumb, ElBreadcrumbItem, ElInputNumber, ElRow, ElCol } from 'element-plus';

const searchForm = ref({
  productCode: '',
  productName: '',
  category: [],
  brand: '',
  productTag: '',
  stockStatus: '',
  saleStatus: '',
  priceRange: null,
  launchDate: null,
  offShelfDate: null,
  supplier: '',
  manufacturer: ''
});

const addForm = ref({
  productCode: '',
  productName: '',
  category: [],
  brand: '',
  stockStatus: '',
  priceRange: null,
  saleStatus: '',
  launchDate: null,
  offShelfDate: null,
  supplier: '',
  manufacturer: ''
});

const editForm = ref({
  productCode: '',
  productName: '',
  category: [],
  brand: '',
  stockStatus: '',
  priceRange: null,
  saleStatus: '',
  launchDate: null,
  offShelfDate: null,
  supplier: '',
  manufacturer: ''
});

const viewForm = ref({
  productCode: '',
  productName: '',
  category: [],
  brand: '',
  stockStatus: '',
  priceRange: null,
  saleStatus: '',
  launchDate: null,
  offShelfDate: null,
  supplier: '',
  manufacturer: ''
});
const isViewDialogVisible = ref(false);
const isEditDialogVisible = ref(false);
const isAddDialogVisible = ref(false);
const categoryOptions = ref([
  {
    value: '1',
    label: '电子产品',
    children: [
      {
        value: '1-1',
        label: '手机'
      },
      {
        value: '1-2',
        label: '电脑'
      }
    ]
  },
  {
    value: '2',
    label: '家居',
    children: [
      {
        value: '2-1',
        label: '家具'
      },
      {
        value: '2-2',
        label: '家电'
      }
    ]
  }
]);

const tableData = ref([
  {
    productCode: 'P001',
    productImage: 'https://th.bing.com/th/id/OIP.iMirHEyoISX0GpzNiT9UQQHaE7?w=270&h=180&c=7&r=0&o=5&pid=1.7',
    productName: '智能手表',
    category: '电子产品',
    brand: '小米',
    stockStatus: '已上架',
    priceRange: '100-200',
    saleStatus: '在售',
    launchDate: '2024-01-01',
    offShelfDate: '2024-12-31',
    supplier: '华信科技',
    manufacturer: '智能科技有限公司',
    productTag: '热销',
    origin: '中国深圳',
    expirationDate: '2025-01-01',
    batchNumber: '批号1',
    remarks: '备注1'
  },
  {
    productCode: 'P002',
    productImage: 'https://th.bing.com/th/id/OIP.tlkb-Fvt9deXOkE5IEP8hwHaFC?w=266&h=180&c=7&r=0&o=5&pid=1.7',
    productName: '蓝牙耳机',
    category: '电子产品',
    brand: '华为',
    stockStatus: '已上架',
    priceRange: '100-200',
    saleStatus: '在售',
    launchDate: '2024-01-01',
    offShelfDate: '2024-12-31',
    supplier: '东升电子',
    manufacturer: '音频设备制造厂',
    productTag: '热销',
    origin: '中国广州',
    expirationDate: '2025-01-01',
    batchNumber: '批号2',
    remarks: '备注1'
  },
  {
    productCode: 'P003',
    productImage: 'https://th.bing.com/th/id/OIP.iMirHEyoISX0GpzNiT9UQQHaE7?w=270&h=180&c=7&r=0&o=5&pid=1.7',
    productName: '巧克力礼盒',
    category: '食品',
    brand: '德芙',
    stockStatus: '已下架',
    priceRange: '100-200',
    saleStatus: '在售',
    launchDate: '2024-01-01',
    offShelfDate: '2024-12-31',
    supplier: '甜蜜食品贸易',
    manufacturer: '美味巧克力厂',
    productTag: '热销',
    origin: '比利时布鲁塞尔',
    expirationDate: '2025-01-01',
    batchNumber: '批号3',
    remarks: '备注1'
  }
]);

const addFormRules = {
  productCode: [{ required: true, message: '请输入商品编号', trigger: 'blur' }],
  productName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择商品类别', trigger: 'change' }],
  brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
  stockStatus: [{ required: true, message: '请选择库存状态', trigger: 'change' }],
  priceRange: [{ required: true, message: '请输入价格区间', trigger: 'blur' }],
  saleStatus: [{ required: true, message: '请选择销售状态', trigger: 'change' }],
  launchDate: [{ required: true, message: '请选择上架时间', trigger: 'change' }],
  offShelfDate: [{ required: true, message: '请选择下架时间', trigger: 'change' }],
  supplier: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
  manufacturer: [{ required: true, message: '请输入制造商', trigger: 'blur' }]
};

const searchFormRef = ref(null);
const addFormRef = ref(null);

function onSearch() {
  console.log('Search:', searchForm.value);
}

function onReset() {
  searchForm.value = {
    productCode: '',
    productName: '',
    category: [],
    brand: '',
    productTag: '',
    stockStatus: '',
    saleStatus: '',
    priceRange: null,
    launchDate: null,
    offShelfDate: null,
    supplier: '',
    manufacturer: ''
  };
}

function showAddDialog() {
  console.log("sdfsdf")
  isAddDialogVisible.value = true;
  console.log("==========")
}

function resetAddForm() {
  addForm.value = {
    productCode: '',
    productName: '',
    category: [],
    brand: '',
    stockStatus: '',
    priceRange: null,
    saleStatus: '',
    launchDate: null,
    offShelfDate: null,
    supplier: '',
    manufacturer: ''
  };
}

function handleAdd() {
  addFormRef.value.validate((valid) => {
    if (valid) {
      console.log('Add:', addForm.value);
      isAddDialogVisible.value = false;
      // 这里可以调用API进行数据提交
    } else {
      console.log('error submit!');
      return false;
    }
  });
}

function handleView(row) {
  viewForm.value = { ...row }; // 复制当前行数据到查看表单
  isViewDialogVisible.value = true; // 显示查看对话框
}

function closeViewDialog() {
  isViewDialogVisible.value = false; // 关闭对话框
}


function handleDelete(row) {
  console.log('Delete:', row);
}

function handleSelectionChange(selection) {
  console.log('Selection change:', selection);
}
</script>

<style scoped>
.search-container {
  margin: 20px;
}

.table-container {
  margin: 20px;
}

.add-form {
  max-width: 800px;
}
</style>
